<template>
	<view class="order-details-container">
		<c-layout>
			<c-navigation-bar leftIconBorder="#E1E8E8" :title="$t('storeManagement.myInvoice')" slot="head"  >
				<view class="more-box" slot="rightIcon">
					<view class="more-block" >
						<image src="../../../static/images/user/more.png" mode="" @click="moreClick"></image>
				
						<view class="choose-box" v-if="show">
							<view class="time-box" @click="getTimeList">{{$t('storeManagement.time')}}</view>
							<view class="" @click="getMoneyList">{{$t('storeManagement.money')}}</view>
						</view>
					</view>
				</view>
			</c-navigation-bar>
			

			<view class="tabs">
				<view class="tabs_aside" :class="active === 0 ? 'active' : ''" @click="handleActive0">{{$t('storeManagement.purchase')}}</view>
				<view class="tabs_aside" :class="active === 1 ? 'active' : ''" @click="handleActive1">{{$t('storeManagement.sales')}}</view>
			</view>
			<!-- 收据图片 -->
			<view class="lists-box" v-if="active === 0">
				<invoice v-for="item in lists" :lists="item" :key="item.info.id" @openImage="openImage(item)"></invoice>
			</view>
			<view class="lists-box" v-if="active === 1">
				<invoice v-for="item in soldLists" :lists="item" :key="item.id" @openImage="openImage(item)"></invoice>
			</view>

			<!-- 图片弹框 -->
			<u-popup v-model="showPhoto" mode="center" width=" 710rpx" border-radius="14">
				<!-- <image :src="src" mode="heightFix"></image> -->
				<!-- 收据表格 -->
				<view class="invoice">
					<view class="tittle">Here Is The Invoice</view>
					<view class="tittle2">
						<view class="intro">
							<view class="tittle-box">{{$t('storeManagement.InvoiceNo')}}:</view>
							<view class="num-box">{{ orderDetail.id|| orderDetail.info.id }}</view>
						</view>
						<view class="intro">
							<view class="tittle-box">{{$t('storeManagement.Platform')}}:</view>
							<view class="num-box">{{$t('storeManagement.live&business')}}</view>
						</view>
					</view>

					<u-table border-color="#000000">
						<u-tr class="u-tr">
							<u-th class="u-th">{{$t('storeManagement.name')}}</u-th>
							<u-th class="u-th">{{$t('storeManagement.quantity')}}</u-th>
							<u-th class="u-th">{{$t('storeManagement.unitPrice')}}</u-th>
							<u-th class="u-th">{{$t('storeManagement.TotalAmount')}}</u-th>
							<u-th class="u-th">{{$t('storeManagement.actualPayAmount')}}</u-th>
							<u-th class="u-th" v-if="orderDetail.info" >{{$t('storeManagement.pattern')}}</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="item in orderDetail.sku||orderDetail.orderSkus" :key="item.id">
							<uni-tooltip :content="item.name">
								<u-td class="u-td">{{ item.name }}</u-td>
							</uni-tooltip>
							<u-td class="u-td">{{item.num || orderDetail.info.totalNum}}</u-td>
							<u-td class="u-td">{{ item.price }}</u-td>
							<u-td class="u-td">{{ item.money }}</u-td>
							<u-td class="u-td">{{ item.hasOwnProperty("actualPayAmount")? item.actualPayAmount||0: item.money }}</u-td>
							<uni-tooltip v-if="orderDetail.info" :content="orderDetail.info.payType==0? $t('storeManagement.DeliveryBeforePayment'):$t('storeManagement.PaymentBeforeDelivery')">
							<u-td class="u-td" v-if="orderDetail.info">{{orderDetail.info.payType==0? $t('storeManagement.DeliveryBeforePayment'):$t('storeManagement.PaymentBeforeDelivery')}}</u-td>
							</uni-tooltip>
						</u-tr>
					</u-table>
					<view class="tittle2">
						<view class="intro">
							<view class="tittle-box">{{$t('storeManagement.StoreName')}}:</view>
							<view class="num-box">{{ shopName }}</view>
						</view>
						<view class="intro">
							<view class="tittle-box">{{$t('anchorConsole.date')}}:</view>
						{{publicJS.timeZoneSwitching(orderDetail.endTime?Number(orderDetail.endTime):orderDetail.info?Number(orderDetail.info.createTime):'',"DD/MM/yyyy")}}
						</view>
					</view>
				</view>
				<view class="zhang-box">
					<image src="@/static/images/zhang.png" mode=""></image>
				</view>
			</u-popup>
		</c-layout>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shopName: uni.getStorageSync('vuexShopName'),
			orderDetail: { info: {} },
			popuList: {},
			current: 1,
			src: '',
			showPhoto: false,
			show: false,
			active: 0,
			explain:
				'The transaction receipt contains the commodity description and ordering information when the order is created. This page is used as the basis for judgment in case of transaction disputes between the buyer and the seller and the platform.',
			lists: [],//采购收据列表
			soldLists: []//销售收据列表
		};
	},
	methods: {
		openImage(item) {
			this.orderDetail = item;
			this.showPhoto = !this.showPhoto;
		},
		getTimeList() {
			this.show = !this.show;
			let data = {
				current: this.current,
				size: 10,
				shopId: +uni.getStorageSync('vuexShopId'),
				time: true
			};
			if (this.active == 0) {
				this.$u.post(`/app/shopPurchaseInfo/Invoicepage`, data).then((r) => {
					this.lists = r.data.records;
				});
			} else {
				this.$u.post(`/app/shopOrderInfo/listInvoice`, data).then((r) => {
					this.soldLists = r.data.records;
				});
			}
		},
		getMoneyList() {
			this.show = !this.show;
			let data = {
				current: this.current,
				size: 10,
				shopId: +uni.getStorageSync('vuexShopId'),
				money: true
			};
			if (this.active == 0) {
				this.$u.post(`/app/shopPurchaseInfo/Invoicepage`, data).then((r) => {
					this.lists = r.data.records;
				});
			} else {
				this.$u.post(`/app/shopOrderInfo/listInvoice`, data).then((r) => {
					this.soldLists = r.data.records;
				});
			}
		},
		//更多
		moreClick() {
			this.show = !this.show;
		},
		//获取采购订单列表
		getPerchaseLists() {
			let data = {
				current: this.current,
				size: 10,
				shopId: +uni.getStorageSync('vuexShopId')
			};
			this.$u.post(`/app/shopPurchaseInfo/Invoicepage`, data).then((r) => {
				this.lists = r.data.records;
			});
		},
		//获取销售订单列表
		getSoldLists() {
			let data = {
				current: this.current,
				size: 999,
				shopId: +uni.getStorageSync('vuexShopId')
			};
			this.$u.post(`/app/shopOrderInfo/listInvoice`, data).then((r) => {
				this.soldLists = r.data.records;
				console.log(111,this.soldLists);
			});
		},
		handleActive0(){
			this.active = 0
			this.getPerchaseLists();
		},
		handleActive1(){
			this.active = 1
			this.getSoldLists();
		}
	},

	onLoad() {
		this.getPerchaseLists();
	}
};
</script>

<style lang="scss" scoped>
/deep/.u-table {
	border-right: #000000 !important;
	border-bottom: #000000 !important;
	width: fit-content;
}
/deep/.u-th {
	background-color: #ffffff;
	color: #000000 !important;
	font-size: 24rpx !important;
	max-width: 59px;
	font-weight: 399;
}
/deep/.u-td {
	background-color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #535353 !important;
	max-width: 59px;
	min-width: 59px;
	font-size: 20rpx !important;
}
.tabs {
	height: 68rpx;
	border-radius: 34rpx 34rpx 34rpx 34rpx;
	opacity: 1;
	width: 80%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin: 58rpx auto;
	padding: 0 8rpx;

	.tabs_aside {
		width: 36%;
		height: 64rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
		font-weight: 400;
		color: #c9c9c9;
		transition: transform 0.4s;
		background-color: #f5f6f8;
		border-radius: 20rpx;
		line-height: 64rpx;
	}

	.active {
		background: #2934d0;

		color: #ffffff;
	}
}
.more-box {
	width: 100rpx;
	height: 100rpx;

	image {
		width: 100%;
		height: 100%;
	}

	.more-block {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		.choose-box {
			position: absolute;
			width: 240rpx;
			box-shadow: 0px 0px 15px #d5d5d5;
			border-radius: 10rpx;
			z-index: 99999;
			top: 120rpx;
			right: 5rpx;
			background-color: #ffffff;
			&::before {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 20rpx solid #f8f8f8;
				border-left: 20rpx solid transparent;
				// border-left: none;
				position: absolute;
				top: -20rpx;
				right: 40rpx;
				box-shadow: 0px 0px 15px #d5d5d5;
			}
			view {
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				&:first-child {
					border-bottom: 1px solid rgba(0, 0, 0, 0.3);
				}
			}
		}
	
	}
}

// -------
.lists-box {
	margin: 40rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.invoice {
	padding: 16rpx 12rpx 24rpx;
	.tittle {
		font-size: 28rpx;
		color: #1b1d29;
		text-align: center;
	}
	.tittle2 {
		padding: 14rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.intro {
			display: flex;
			align-items: center;
			.tittle-box {
				color: #9e9e9e;
				font-size: 20rpx;
			}
			.num-box {
			color: #1b1d29;
			    font-size: 10px;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: normal;
			    max-width: 320rpx;
			    display: -webkit-box;
			    -webkit-box-orient: vertical;
			    -webkit-line-clamp: 1;
			}
		}
	}
}
.zhang-box {
	position: absolute;
	right: 20rpx;
	bottom: 0;
	z-index: -1;
	width: 130rpx;
	height: 130rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
</style>
